Елена Булыгина предлагает Вам запомнить сайт «Ленусик»
Вы хотите запомнить сайт «Ленусик»?
Да Нет
×
Прогноз погоды

Основная статья: Дизайн интерфейсов

10 направлений дизайна с практической пользой

Для многих людей, далеких от творческих профессий, дизайнеры, художники и все прочие поэты живут в своем мире, оторванном от реальности, не делают ничего «дельного» и, чего уж греха таить, вообще паразитируют на теле общества.  Но на самом деле, в отличие от поэтов и художников, дизайнеры всегда решает конкретную, осязаемую задачу. Эта статья поможет выбрать такое направление в дизайне в зависимости от того, что вам нравится.

UX/UI-дизайн

Начнем с дизайна пользовательского опыта / пользовательских интерфейсов (User eXperience / User Interface). Эти два направления часто ставят вместе, но некоторая разница между ними все-таки есть. Цель UX-дизайна — развивать взаимодействие пользователя с продуктом так, чтобы росло удовлетворение пользователя, а вместе с ним и его лояльность продукту. Формулировка очень обтекаемая, но она четко выражает суть термина. UX-дизайн применим во всех сферах жизни, в отличие от UI-дизайна, который все-таки относится к цифровым продуктам. UI-дизайн сконцентрирован на самом продукте.

Обладатель премии UX Design Awards 2019 года — бимодальное слуховое решение, управляемое с помощью смартфона 

В статье Хельги Морено, посвященной разнице между UX- и UI-дизайном, есть хорошее сравнение: «Если что-нибудь выглядит здорово, но им сложно пользоваться — это признак хорошего UI и плохо UX. Если пользоваться легко, но на вид это ужасно — мы имеем дело с хорошим UX и недоработанным UI».

Кстати, сегодня мы как раз запустили новый факультет GeekUniversity — UX/UI-дизайн. Но об этом мы еще напомним — давайте продолжим рассказ о других «полезных» направлениях дизайна.

Промышленный дизайн

Пример интересного индустриального дизайна

Это дизайн любых материальных изделий — от чашек до летательных аппаратов. Основная цель промышленного дизайна — сделать производимые объекты удобнее в использовании, эстетичнее и при этом сократить расходы на их изготовление. Если вы можете посмотреть на привычную вещь, обнаружить в ней слабые места и придумать, как ее улучшить, то стоит попробовать себя в промдизайне. Особенно если вас воодушевляет мысль, что идея из вашей головы материализуется и будет приносить пользу людям.

Веб-дизайн

Когда веб-дизайнер добавляет пространства между элементами

Задача веб-дизайнера — донести информацию пользователю. Специалисту нужно продумать логическую структуру сайта или приложения и выбрать оптимальное художественное оформление. Если на сайтах вас часто возмущают визуальные недочеты и вы знаете, как сделать гармоничнее и удобнее, — попробуйте себя в этом направлении.

Графический дизайн

Примеры логотипов в зависимости от свойств, которые нужно передать

Графический дизайнер налаживает общение бизнеса с клиентами с помощью визуальных средств. Например, один и тот же текст, написанный разными шрифтами, может создать у потенциальных клиентов разное первое впечатление о бренде: представить его как премиальный или, наоборот, предлагающий доступные по цене товары. Разработка айдентики, логотипов, баннеров и упаковок — все это задачи графического дизайнера. Если вы умеете передавать смысл емкими и лаконичными решениями, доносить идеи с помощью образов, можете быстро генерировать ассоциации — стоит попробовать себя в графическом дизайне.

Гейм-дизайн

Прекрасный мир Skyrim, созданный гейм-дизайнерами

Гейм-дизайн — все, что касается формы и содержания игр: создание правил игры, персонажей, миссий, загадок, уровней. Если вы с детства увлекались фантастикой, хотите воплощать магию в жизнь, создавая мифических персонажей или целые миры, — попробуйте себя в гейм-дизайне.

Архитектурный дизайн

Традиционная архитектура в Голландии

Задача архитектора — спроектировать здания, на которые приятно смотреть и в которых удобно жить или работать. Вас вдохновляют масштабные задачи и нравится думать, что ваши творения будут приносить людям пользу десятилетиями, а то и веками? Нравится мысль, что вы будете влиять на облик городов? Интересуетесь урбанистикой и можете оценить каждую деталь архитектурного решения (например, высоту бордюра у тротуара) по практичности, а не только по внешнему виду? Можете не только изобразить здание на бумаге, но и представить его «в жизни», примерив к потребностям каждого из будущих гостей или обитателей? Если такие задачи отзываются желанием взяться за дело — смело развивайтесь в архитектурном дизайне.

Дизайн интерьеров

Когда решил сэкономить на услугах дизайнера

Дизайнер интерьеров делает так, чтобы в помещениях было приятно и комфортно находиться. Он создает в них атмосферу, которая настраивает людей на нужный лад. Если вам нравится такая миссия и вы можете гармонично вместить максимум функциональности в минимум квадратных метров — пробуйте себя здесь!

Световой дизайн

Световой дизайн фар Audi

На первый взгляд это направление может показаться излишеством. Но у светового дизайнера сложная задача и важная миссия: он должен сделать освещение приятным и обеспечить нужный психоэмоциональный эффект — например, повысить трудоспособность или, наоборот, создать расслабляющую атмосферу. А при этом еще максимально сэкономить на электроэнергии.

Вам нравится играть со светом и вы знаете, как с его помощью выгодно подать любой объект? Вы видите магию света всюду — на фотографиях, в кино, в музеях, театрах и ресторанах? Развивайте свой талант в световом дизайне.

Ландшафтный дизайн

Сад камней

Ландшафтный дизайн — не просто садоводство, а настоящее искусство на пересечении архитектуры, ботаники и философии. Дизайнер сочетает эти три аспекта в зависимости от того, как будет использоваться территория, которую он облагораживает. Вы цените гармонию и единение с природой? Можете разглядеть в композиции сада камней послание в духе традиционного японского символизма? Вероятно, вам придется по душе ландшафтный дизайн.

Экологичный дизайн

Зеленый дизайн в Сиднее

Основная задача экологичного дизайна — восстановить контакт человека с природой. Использование натуральных материалов, экономичное потребление ресурсов, безвредность для окружающей среды — базис этого направления. Если вам хочется видеть зеленое будущее планеты, то стоит попробовать себя в экодизайне.

В GeekUniversity вы можете освоить различные виды дизайна. Есть как «общий» факультет, так и специализированные — веб-дизайн, графический дизайн, дизайн интерьера. И, как уже было сказано в начале, сегодня открылся еще и факультет UX/UI-дизайна, где за один год обучения вы освоите все навыки специалиста уровня middle и разработаете портфолио для дальнейшего трудоустройства.

Пройти обучение

6 ноя 19, 21:21
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

UI-дизайн: начало пути и штурм больших заказов

Виталий Асташкин, психолог по образованию, после вуза работал педагогом-организатором. Когда захотел перемен — освоил дизайн интерфейсов в GeekBrains и начал фрилансить. Сейчас у Виталия за плечами несколько проектов для крупных заказчиков, таких как концерн «Калашников», Уральский вагоностроительный завод и правительство Республики Удмуртия.

— Виталий, первый вопрос о том, чем вы сейчас занимаетесь. В каких стартапах и над какими проектами работаете?

— Сейчас я совмещаю две профессии: днем — педагог, ночью — дизайнер. Что касается дизайна, участвую в нескольких проектах параллельно, работаю в стартапах и на фрилансе.

В одной команде мы создаем виртуальную химическую лабораторию: с помощью VR-очков и контроллера вы можете проводить химические опыты.

Дизайн периодической системы химических элементов. Таблица распечатывается и считывается камерой смартфона для получения дополнительной информации в AR

В другой команде — разрабатываем мобильное приложение для продажи одежды. Пользователь задает параметры: размер, цветотип и другие, — а программа показывает только подходящие модели.

Карточка товара в приложении для подбора одежды FitsMe 

— Расскажите о крупных проектах, в которых участвовали: для концерна «Калашников» и Уральского вагоностроительного завода. 

— Для «Калашникова» я готовил интерфейс AR-приложения, которое показывает на карте мира пути поставок продукции и сведения о заводах концерна. 

Для Уральского вагоностроительного завода — создал интерфейс интерактивного экрана, знакомящего зрителей с историей завода, техническими характеристиками продукции, фотогалереей и другими материалами.

Экран с информацией о поезде. Проект для Уралвагонзавода

— Где можно посмотреть примеры ваших работ?

— Когда плотно занялся дизайном, начал понимать все эти разговоры о портфолио: мол, когда уходишь в работу, забываешь его пополнять. Однако стараюсь постоянно выкладывать хотя бы шоты челленджей на Dribbble

Кстати, свой первый серьезный заказ я получил именно благодаря аккаунту на Dribbble. Скинул свой профиль, выполнил тестовое задание — и за работу!

— Сколько времени вам понадобилось, чтобы выйти на профессиональный уровень в дизайне: с момента, когда вы начали целенаправленно этим заниматься, и до оплачиваемого заказа? Насколько легко или трудно было найти первую работу?

— В GeekBrains я учился с января по май 2018 года. После этого проходил бесплатную практику в реальном проекте: мы разрабатывали приложение для путешественников. К сожалению, проект так и не добрался до релиза, но я получил опыт работы в команде.

Где-то с августа 2018 я начал выполнять первые небольшие заказы от друзей и знакомых. К маю 2019 года — взял первый крупный заказ.

Самое сложное — когда кажется, будто ничего не знаешь и не умеешь. Вроде отучился, а открываешь тот же Dribbble, смотришь на все это великолепие и думаешь: «А вот я так не могу». Однако не стоит бояться!

В одном чате для дизайнеров искали желающих сделать интерфейс для AR-приложения. Я собрался с духом и вызвался одним из первых. Так я познакомился с ребятами из BoxGlass — команды, которая как раз готовила приложение для концерна «Калашников». 

С тех пор я с ними сотрудничаю на регулярной основе. Мы реализовали несколько интересных проектов, в том числе приложение для посетителей инвестфорума — по заказу правительства Республики Удмуртия. Через очки виртуальной реальности пользователь осматривает 360-градусную панораму здания, где можно увидеть этапы строительства, почитать инфографику.

Инфографика для панорамы 360°

— Какие знания и навыки надо обязательно получить перед тем, как искать работу в сфере дизайна интерфейсов?

— На старте надо владеть программами для прототипирования: например, Figma, Sketch, Axure. Конечно, эскизы приложения можно набросать и на листочке, но собранный в Figma интерактивный прототип будет куда информативнее и привлекательнее для заказчика.

Для подготовки иллюстраций, иконок и сложной графики пригодится Adobe Illustrator.

Для работы с растровой графикой — Photoshop. К слову, некоторые заказчики до сих пор просят исходники в формате .psd.

Надо знать основы типографики, композиции, теории цвета, постоянно обновлять знания по теории интерфейсов и следить за тенденциями. В этой сфере непрерывно идет развитие, все меняется: сегодня скевоморфизм, завтра — флэт.

Вообще, чем больше у вас знаний в разных областях, тем лучше. Знакомы с HTML хотя бы на самом базовом уровне? Хорошо. Знаете, что такое Native React? Прекрасно. Прочли книги по копирайтингу? Отлично! 

Текст — неотъемлемый элемент дизайна и интерфейсов. При подготовке макетов, чтобы не вставлять «рыбу» текста или фразы вроде «тут будет заголовок», полезно уметь формулировать ключевые мысли. 

Мне мой внутренний редактор не позволяет делать заголовки в духе «самый атличный прадукт, несомненно, на рынке». Тут и банальная грамотность нужна, и хоть какое-то понимание основ работы с текстом.

Нет предела совершенству: каждый проект чему-то учит, заставляет изобретать.

— С чего начался ваш путь в дизайн? Когда вы решили, что это всерьез и нужно получать дополнительное образование? 

— Путь начался еще в старшей школе, когда я делал афиши для мероприятий подросткового клуба. Позднее начал изучать веб и запустил городской портал. Даже делал макеты баннеров для местной лиги КВН. Не обошло меня и создание аватарок для групп «ВКонтакте» :)

Чтобы заниматься всем этим, я читал статьи, шерстил форумы, смотрел обучающие видео. Так у меня накопился большой массив разрозненных и обрывочных знаний, которые годились под конкретные задачи, но не складывались в общую картину. Я решил, что пора все структурировать, «узаконить» и превратить в новую профессию.

— Почему выбрали именно UI, а не другие направления?

— Мне это просто-напросто интересно. А когда интересно, легче учиться и работать. К тому же дизайн интерфейсов — широкая область знаний, связанная с разными IT-направлениями.

— Расскажите немного о жизни до учебы в GB. Почему после вуза вы решили стать педагогом и до сих пор не хотите расставаться с этой профессией?

— Я окончил МЭИ по специальности «Психология». Еще во время учебы в вузе работал с подростками в молодежном клубе. Вскоре после получения диплома я нашел вакансию педагога в лицее в Звенигороде. Предложение оказалось более привлекательным, чем то, что можно было найти у нас в Краснозаводске, и я переехал. 

Не было такого, чтобы я решил для себя «После вуза стану педагогом!». Это был естественный ход событий. 

Общение с учениками позволяет оставаться в тренде. Я в курсе, что они слушают и смотрят, за чем следят. Они без стеснения делятся своими мыслями, и, считаю, у них можно чему-то научиться.

— Как вам удается совмещать две работы: педагога и дизайнера? Как обычно выглядит рабочий день?

— Подъем, душ, завтрак — и в путь. Живу я неподалеку от работы, и это несомненный плюс. По возвращении домой, после перерыва и прогулки, превращаюсь в дизайнера. Помогает самоорганизация: свои проекты я веду в Trello, где отслеживаю загруженность, сроки и общий объем задач. 

Стараюсь в один вечер заниматься одним проектом, не отвлекаясь на другие. Это позволяет лучше сконцентрироваться и погрузиться в работу.

Важно оценивать свои силы, чтобы не работать на износ и не выгореть. Поэтому я обязательно устраиваю себе выходные, когда не занимаюсь вообще ничем, связанным с дизайном.

Но у меня нет строгого распорядка дня в ежедневнике — могу позволить себе неожиданно сорваться на встречу с друзьями. При этом всегда помню о деле и думаю, как организовать время, чтобы не подвести заказчика и сдать работу в срок.

Прототипирование приложения для подбора авточехлов

— Какими были ожидания от учебы в GB и насколько они оправдались? Какие приобретенные знания и навыки считаете самыми ценными?

— До изучения профессии «Дизайнер интерфейсов» я проходил разные курсы, смотрел вебинары. Мне понравились новогодние скидки в канун 2018, и я решил, что пора действовать. Можно сказать, что тогда я преодолел психологический порог — границу, которую надо перейти, чтобы изменить себя и свою жизнь.

Самым ценным в обучении для меня была обратная связь от преподавателей. Они всегда шли на контакт, отвечали на вопросы, подсказывали и советовали. У них богатый опыт, и они охотно им делятся.

 — Вам в дизайнерской работе доводилось осознанно, специально применять свои знания в области психологии?

— Не скажу, что каждому дизайнеру непременно надо знать психологию. Нет. Лично мне вуз помог воспитать структурированный подход к решению задач. И, конечно, знание психологии полезно в общении с заказчиками. 

Важно помнить, что у каждого своя картина мира: если для одного человека «собачка» — это пекинес, для другого — замок на застежке-молнии. Не надо стесняться задавать наводящие вопросы и уточнять у клиента, что он имеет в виду. Например, он говорит: «Кнопка недостаточно агрессивна». Что это значит? Надо сделать ее более крупной? Изменить ее цвет или форму? Львиную долю вопросов можно снять простым уточнением.

— Как вы себе представляете карьеру в дизайне? Куда собираетесь расти и как развиваться дальше?

— Сейчас мне нравится работать в разных командах, над разными проектами. Возможно, попробую себя в какой-нибудь студии, но на данный момент фриланс позволяет заниматься именно теми проектами, которые интересны мне.

Планирую углубиться в UX, поведение и паттерны. Главное — не останавливаться.

— Спасибо, что поделились историей, примерами работ, наблюдениями. Успеха вам в профессии и творчестве!

Пройти обучение

11 сен 19, 08:33
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

Улучшить интерфейс за счёт мелочей: 7 хитростей

Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.

Каждый веб-разработчик неизбежно приходит к моменту, когда приходится принимать важные решения по визуальному дизайну. Может быть, в вашей компании нет дизайнера на полную ставку, и поэтому вам приходится самостоятельно внедрять интерфейс новой функциональности. А может, вы взялись за сторонний проект и хотите, чтобы он выглядел лучше, чем ещё один сайт, созданный с помощью Bootstrap. Легко сдаться и сказать, что вы неспособны это сделать, потому что вы не художник. Но, оказывается, существует множество приёмов, которые не требуют опыта в графическом дизайне. Ниже приведены семь простых идей, которые помогут улучшить дизайн веб-страницы.

1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:

• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).

• Серый для второстепенного текстового контента (дата публикации статьи).

• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:

• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.

• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.

2. Не делайте серый текст на цветном фоне

Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.

Уменьшить прозрачность белого текста

Сделайте текст белым и увеличьте степень его прозрачности. Фон в таком случае будет немного просвечивать, а значит, текст не будет привлекать внимание читателя и не будет конфликтовать с фоном.

Вручную подобрать цвет, который будет основан на цвете фона

Этот способ работает лучше, чем увеличение степени прозрачности, если фон — это фотография или рисунок, или если увеличение прозрачности текста делает его слишком мрачным либо размытым. Выберите цвет того же оттенка, что и фон, а дальше настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.

3. Смещайте тени

Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

4. Меньше используйте границы

Если нужно разделить два элемента, не хватайтесь за границы, будто это единственный способ. Слишком частое использование границ может перегрузить дизайн. В следующий раз, когда решите воспользоваться границами, вспомните про одну из следующих идей.

Использовать тень в ячейке

Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.

Использовать два различных цвета фона

Чтобы разделить два расположенных рядом элемента достаточно даже небольшого отличия в цвете фона хватит. Если вы уже используете разный цвет фона в дополнение к границе, попробуйте её удалить — возможно, она вам и не нужна.

Добавить дополнительное пространство

Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.

5. Не увеличивайте иконки, которые должны быть маленькими

Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.

6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн

Если вы не графический дизайнер, как добавить веб-интерфейсу визуальную изюминку, которая у дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям? Очень простой способ — с помощью цветных границ добавить акцент в те части интерфейса, которые иначе бы смотрелись слишком бледно. Например, сбоку от предупреждения:

Или чтобы подчеркнуть активный пункт навигации:

Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.

7. Не каждой кнопке нужен цветной фон

Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:

• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.

• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.

• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:


2 апр 18, 12:48
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0
Показаны все темы: 3

Последние комментарии

нет комментариев
Читать

Поиск по блогу

Люди

7 пользователям нравится сайт lena2018.mirtesen.ru